
<nav id="xxx" class="fluent-appbar" style="display: flex; flex-direction: column; height: 100%; gap: calc(var(--design-unit) * 0.5px);" role="navigation" orientation="vertical" b-dkkdhxy2t7="">
  <div id="xxx" class="fluent-appbar-item" style="min-height: calc(var(--appbar-item-size) * 1px - 20px);" title="My item tooltip">
    <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
      <a href="/" blazor:onclick="1" class="active" aria-current="page">
        <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
          <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4" part="icon-rest">
            <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
          </svg>
          <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="5" blazor:onclick="6" part="icon-active">
            <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
          </svg>
          <div part="label">My item</div>
        </div>
      </a>
    </div>
  </div>
  <div id="xxx" class="fluent-appbar-item" style="min-height: calc(var(--appbar-item-size) * 1px - 20px);" title="My item 2 tooltip">
    <div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
      <a href="/" blazor:onclick="2" class="active" aria-current="page">
        <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
          <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="7" blazor:onclick="8" part="icon-rest">
            <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
          </svg>
          <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="9" blazor:onclick="10" part="icon-active">
            <path d="M10.03 3.66a2.25 2.25 0 0 1 3.94 0l7.74 14A2.25 2.25 0 0 1 19.74 21H4.25a2.25 2.25 0 0 1-1.97-3.34l7.75-14ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-.26-7.85a.75.75 0 0 0-1.5.1v4.5l.02.1a.75.75 0 0 0 1.49-.1v-4.5l-.01-.1Z"></path>
          </svg>
          <div part="label">My item 2</div>
        </div>
      </a>
    </div>
  </div>
  <div id="xxx" class="fluent-appbar-item" style="min-width: calc(var(--appbar-item-size)* 1px);" tabindex="0" fixed="" title="View more apps" blazor:onclick="11" b-dkkdhxy2t7="">
    <div class="stack-vertical" style="align-items: center; justify-content: center; column-gap: 10px; row-gap: 0px; width: 100%; --appbar-active-indicator-width: calc(var(--design-unit)* 0.5px); height: 100%;" b-0nr62qx0mz="">
      <svg style="width: 24px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="12" blazor:onclick="13" part="icon-rest">
        <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
      </svg>
      <svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="14" blazor:onclick="15" part="icon-active">
        <path d="M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm6 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"></path>
      </svg>
    </div>
  </div>
</nav>